import { Form, Input, Button, Select, Table, Space, Pagination, Popconfirm } from 'antd';
import http from '../../../utils/http';
import store from '../../../store/index'
// import { useEffect,useState } from 'react'

const { Option } = Select;

const Biao = ({ props }) => {
    //设置from
    const [form] = Form.useForm();
    // 设置table的表头
    const columns = [
        {
            title: '设备名称',
            dataIndex: 'ddetName',
        },
        {
            title: '设备编号',
            dataIndex: 'ddetNumber',
        },
        {
            title: '设备型号',
            dataIndex: 'ddetType',
        },
        {
            title: '安装位置',
            dataIndex: 'dinfLocation',
        },
        {
            title: '运行状态',
            dataIndex: 'dinfState',
        },
        {
            title: '运行时长(天)',
            dataIndex: 'dinfRuntime',
        },
        {
            title: '最新更新时间',
            dataIndex: 'dinfUpdate',
        },
        {
            title: '操作',
            dataIndex: '',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={() => { edit2(text, record) }}>详情</a>
                    <Popconfirm
                        title="您确定要删除这条内容吗?"
                        onConfirm={() => { confirm(text, record) }}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>

                </Space>
            )
        },

    ];
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };

    //确认删除的函数
    const confirm = (a, b) => {
        let num = parseInt(b.dinfId)
        let arr = new Array
        arr.push(num)
        http({
            url: '/device/deviceDelete',
            method: 'post',
            data: arr
        }).then((res) => {
            console.log(res);
            //如果删除成功，再次获取table数据，重新渲染
            if (res.code == 200) {
                http({
                    url: '/device/deviceInformation',
                    method: 'post'
                }).then((res) => {
                    console.log(res.data);
                    if (res.code === 200) {
                        props.setMydata(props.manage(res.data.deviceInformationVoList))
                    }
                })
            }
        })
    }

        //搜索
        const search = () => {
            //取出input框的值,设备名称,设备编号，运行状态

            let name = form.getFieldsValue(true).ddetName;
            let bianhao = form.getFieldsValue(true).ddetNumber;
            let type = form.getFieldsValue(true).dinfState;
            if(store.liujinchang.query1){
                store.liujinchang.current = 1;
            }
            store.liujinchang.query1 = false;
            console.log(name, bianhao, type);
            http({
                url: '/device/deviceInformation',
                params: {
                    ddetName: name ? name : '',
                    ddetNumber: bianhao ? bianhao : '',
                    dinfState: type ? type : '',
                    current:store.liujinchang.current
                },
                method: 'post'
            }).then((res) => {
                props.setMydata(props.manage(res.data.deviceInformationVoList))
                store.liujinchang.amount = res.data.sum;
                console.log(res.data.sum,'查询后');
            })
        }
    

    const cancel = () => {

    }

    //重置
    const reset = () => {
        store.liujinchang.query1 = true;
        http({
            url: '/device/deviceInformation',
            method: 'post',
      
          }).then((res) => {
            props.setMydata(props.manage(res.data.deviceInformationVoList))
            store.liujinchang.amount = res.data.sum;
            store.liujinchang.current = 1;
          })
    }

    const edit2 = (a, b) => {
        props.setState(5);
        props.setMydata(b);
    }


    // 分页
    const onChange = (page) => {
        console.log('Page: ', page);
        store.liujinchang.current=page
        console.log('当前页是多少',store.liujinchang.current);
        let query1 = store.liujinchang.query1;
        if(query1){
            console.log('未查询');
            http({
                url: '/device/deviceInformation',
                method: 'post',
                params:{
                    current:page
                }
            }).then((res) => {
                console.log(res);
                if (res.code === 200) {
                    props.setMydata(props.manage(res.data.deviceInformationVoList))
                }
            })
        }else{
            console.log('已查询');
            search();
        }

    }
    const onShowSizeChange = (current, pageSize) => {
        console.log(current, pageSize);
    }
    return (
        <div>
            <Form form={form} name="horizontal_login" layout="inline" className='Role'>
                <Form.Item
                    name="ddetName"
                    label='设备名称'
                >
                    <Input placeholder="请输入设备名称" />
                </Form.Item>
                <Form.Item
                    name="ddetNumber"
                    label='设备编号'
                >
                    <Input placeholder="请输入设备编号" />
                </Form.Item>

                <Form.Item
                    name="dinfState"
                    label='运行状态'
                >
                    <Select placeholder='请选择' className='select'>
                        <Option value="故障检修">故障检修</Option>
                        <Option value="日常巡检">日常巡检</Option>
                    </Select>
                </Form.Item>
                <Form.Item className='btn'>
                    <div>
                        <Button className='cha'
                            type="primary"
                            onClick={search}>查询</Button>
                        <Button className='resize' onClick={reset} type="primary">重置</Button>
                    </div>

                </Form.Item>
            </Form>
            <Table className='table1'
                pagination={false}
                rowSelection={{
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={props.mydata}
            />
            <div className='Pagination1'>
                <Pagination
                    showQuickJumper
                    defaultCurrent={1}
                    current = {store.liujinchang.current}
                    total={store.liujinchang.amount}
                    onChange={onChange}
                    onShowSizeChange={onShowSizeChange}
                />
            </div>
        </div>
    );

}
export default Biao;